import React, { useState } from 'react';
import styles from './SearchForm.module.css';

interface SearchFormProps {
  onSearch: (filters: { name: string; gender: string; studentId: string }) => void;
}

const SearchForm: React.FC<SearchFormProps> = ({ onSearch }) => {
  const [name, setName] = useState('');
  const [gender, setGender] = useState('');
  const [studentId, setStudentId] = useState('');

  const handleSearch = (e: React.FormEvent) => {
    e.preventDefault();
    onSearch({ name, gender, studentId });
  };

  const handleReset = () => {
    setName('');
    setGender('');
    setStudentId('');
    onSearch({ name: '', gender: '', studentId: '' });
  };

  return (
    <form className={styles.searchForm} onSubmit={handleSearch}>
      <div className={styles.formGroup}>
        <div className={styles.formItem}>
          <label htmlFor="name">学生姓名</label>
          <input
            type="text"
            id="name"
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="请输入学生姓名"
          />
        </div>
        <div className={styles.formItem}>
          <label htmlFor="gender">性别</label>
          <select
            id="gender"
            value={gender}
            onChange={(e) => setGender(e.target.value)}
          >
            <option value="">全部</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
        <div className={styles.formItem}>
          <label htmlFor="studentId">学号</label>
          <input
            type="text"
            id="studentId"
            value={studentId}
            onChange={(e) => setStudentId(e.target.value)}
            placeholder="请输入学号"
          />
        </div>
      </div>
      <div className={styles.formActions}>
        <button type="submit" className={`${styles.button} ${styles.searchButton}`}>
          搜索
        </button>
        <button type="button" className={`${styles.button} ${styles.resetButton}`} onClick={handleReset}>
          重置
        </button>
      </div>
    </form>
  );
};

export default SearchForm;